<template>
  <div class="tab">
    <router-link tag="div" class="tab-item" to="/home">
      <i class="icon icon-zhuye"></i>
      <span class="tab-link">首页</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/healthList">
      <i class="icon icon-xiangmu"></i>
      <span class="tab-link">体检</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/news">
      <i class="icon icon-zhuanjiawangluo"></i>
      <span class="tab-link">资讯</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/user">
      <i class="icon icon-kehu"></i>
      <span class="tab-link">我的</span>
    </router-link>
  </div>
</template>

<script>
export default {

}
</script>


<style scoped  scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .tab
    position: fixed
    border-top: 1px solid #eee
    bottom: 0
    width: 100%
    display: flex
    height: 44px
    font-size: $font-size-medium
    background: #fff
    .tab-item
      flex: 1
      text-align: center
      display: flex
      flex-direction: column;
      align-items: center;
      justify-content: center;
      i
        font-size: 22px
        margin-bottom: 2px
        color: $color-text-l
      .home
        background-image: url(home.png)
      .tab-link
        font-size: 15px
        color: $color-text-l
      &.router-link-active
        .tab-link,
        i
          color: $color-theme
</style>
